<template>
  <div class="card-header">
    <el-avatar :src="data.user.avatar" />
    <span>{{ data.user.nickname }}</span>
    <!-- <el-button class="button" text>Operation button</el-button> -->
  </div>
</template>
  
<script setup lang='ts'>
defineProps<{data: {
  user: {
    avatar: String,
    nickname: String
  }
}}>()
</script>
  
<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;

  span {
    margin-left: 10px;
  }
}
</style>